<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>live2d</title>
</head>


<body>
    <canvas id=canvas style="width: 100%;"></canvas>
    <select id="sel" style="font-size: 18px;"></select>
    <div id="btn"></div>
    <button onclick="play()">点击播放动作</button>
</body>
<!-- <script src="./live2dcubismcore.min.js"></script> -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<script>
    //https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B0%91%E5%A5%B3%E5%92%96%E5%95%A1%E6%9E%AA%20girls%20cafe%20gun/girl07/(new)l2d8002.u/l2d8002.u.model3.json
    //https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/%E7%A2%A7%E8%93%9D%E8%88%AA%E7%BA%BF%20Azue%20Lane/Azue%20Lane(JP)/z46_3/z46_3.model3.json
    //https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B0%91%E5%A5%B3%E5%92%96%E5%95%A1%E6%9E%AA%20girls%20cafe%20gun/girl06/l2d17.u/l2d17.u.model3.json
    const cubism4Model =
        "https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/%E5%B0%91%E5%A5%B3%E5%92%96%E5%95%A1%E6%9E%AA%20girls%20cafe%20gun/girl06/l2d17.u/l2d17.u.model3.json";

    (async function main() {
        window.PIXI = PIXI;
        const app = new PIXI.Application({
            view: document.getElementById("canvas"),
            width: window.innerWidth,
            autoStart: true,
            backgroundColor: 0xffffff,
            resolution: 10
        });


        const model4 = await PIXI.live2d.Live2DModel.from(cubism4Model);
        const scaleX = (innerWidth) / model4.width * 1.5;
        const scaleY = innerHeight / model4.height * 1.5;
        app.stage.addChild(model4);
        model4.anchor.set(0.5)
        model4.scale.set(scaleX, scaleX * 0.8);
        model4.x = innerWidth * 0.5
        model4.y = innerHeight * 0.5 + 100
        model4.internalModel.motionManager.groups.idle = '';

        window.model4 = model4
        motionGroups = []
        for (const [group, motions] of Object.entries(model4.internalModel.motionManager.definitions)) {
            motionGroups.push({
                name: group,
                motions: motions?.map((motion, index) => ({
                    file: motion.file || motion.File || '',
                    error: ""
                })) || [],
            });
        }
        console.log(model4.internalModel.motionManager)

        let mG=model4.internalModel.motionManager.definitions
        console.log(mG)
        let idleMotions=[]
        let elseMotions=[]
        for (const [group, motions] of Object.entries(mG)) {
            console.log(group)
            if (group !== 'idle' && Array.isArray(motions)) {
                for (const motion of motions) {
                    for (const keyword of ['stand',]) {
                        if (motion.File && motion.File.toLowerCase().includes(keyword)) {
                            console.log(motion.File)
                            idleMotions.push(motion);
                        }else{
                            elseMotions.push(motion)
                        }
                    }
                }
            }
        }
        console.log(idleMotions)

        if (idleMotions.length) {
            // json.motions.idle = unionBy(json.motions.idle, idleMotions, 'file');

        }

        let select=document.getElementById("sel")
        for (let i of motionGroups[0]['motions']) {
            const newOption = document.createElement('option');  
           // 设置 option 元素的值和文本  
            newOption.value = motionGroups[0]['motions'].indexOf(i);  
            newOption.text = i['file'];  
           // 将新的 option 元素添加到 select 元素中  
            select.appendChild(newOption);  
            // let btn = document.createElement("button");
            // let label = document.createTextNode(i['file']);
            // btn.appendChild(label);
            // btn.addEventListener("click", () => {
            //     model4.motion("", motionGroups[0]['motions'].indexOf(i))
            // });
            // let btt = document.getElementById("btn")
            // btt.appendChild(btn)
        }
        select.addEventListener("click",(event)=>{
            if (event.target.selectedIndex == 0) {
                return;
            }

            let name = event.target.value;
            model4.motion(",",name)
            console.log(name)
        })



    })();
    function play() {
        console.log("hah")
        model4.motion("", 5)
        console.log(model4)
        // console.log(model4.internalModel.motionManager)
    }
</script>

</html>